<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<style type="text/css">
		
	</style>
</head>
<body>
	<div class="bag">
		<div style="overflow: hidden;">
			<div class="img"></div>
		</div>
	</div>
	<div class="transition">css3过度</div>
	<div class="animation">css3过度</div>
	<div class="rotateY">css3旋转</div>
	<!-- <p style="text-align: center;"><img src="images/banner.png"></p> -->
	<div class="grid-gruop">
		<div class="grid grid1">
			<a>
				<b>01</b>
				<span class="step1">数据接入引擎</span>
				<span class="step2">格式转换</span>
			</a>
		</div>
		<div class="grid grid2">
			<b>02</b>
			<span class="step1">数据接入引擎</span>
			<span class="step2">格式转换</span>
		</div>
	</div>
	<div class="dragArea fix"></div>
	<div ><input name="range1" type="range" min="0" max="100" step="10" /></div>
	<div class="dragArea">
		<div class="dragBin"><b>垃<br/>圾<br/>箱</b></div>
		<div class="dragBox">
			<div class="dragList">模块1</div>
			<div class="dragList">模块2</div>
			<div class="dragList">模块3</div>
			<div class="dragList">模块4</div>
			<div class="dragList">模块5</div>
		</div>
		<div class="dragCopy"></div>
	</div>
	<div class="fix dragemind"></div>
	<div id="cavansBox">
	<canvas  id="canvas" width="200" height="100" style="border:1px solid #CCC;">
		你的游览器不支持canvas！
	</canvas>
	</div>
	<div id="tab"><button id="tab1">点击</button><span>你点击的次数：0</span></div>
	<datalist>
		<option value="">sadsa</option>
		<option value="">sadsa</option>
		<option value="">sadsa</option>
		<option value="">sadsa</option>
		<option value="">sadsa</option>
	</datalist>
	<form onsubmit="return false">
		<input id="num_a"></input>+
		<input id="num_b"></input>=
		<output id="result" onforminput="resCalc()"></output>
		<button type="submit">计算</button>
	</form>
	<abbr>AssBssCjjgfjhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjf</abbr>
	<fieldset>
		<legend>sfs</legend>
	</fieldset>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(".img").on("mouseover",function(){
		$(this).removeClass("imgc1");
		$(this).addClass("imgc");
		alert1();
	});
	$(".img").on("mouseout",function(){
		$(this).removeClass("imgc");
		$(this).addClass("imgc1");
	});

	var $ = function(selector) {
	if (!selector) { return []; }
	var arrEle = [];
	if (document.querySelectorAll) {
		arrEle = document.querySelectorAll(selector);
	} else {
		var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
		if (lAll) {
			var i = 0;
			for (i; i<lAll; i+=1) {
				if (/^\./.test(selector)) {
					if (oAll[i].className === selector.replace(".", "")) {
						arrEle.push(oAll[i]);
					}
				} else if(/^#/.test(selector)) {
					if (oAll[i].id === selector.replace("#", "")) {
						arrEle.push(oAll[i]);
					}
				}
			}
		}
	}
	return arrEle;
};

var eleDustbin = $(".dragBin")[0], eleDrags = $(".dragList"), lDrags = eleDrags.length, eleRemind = $(".dragemind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
	eleDrags[i].onselectstart = function() {
		return false;
	};
	eleDrags[i].ondragstart = function(ev) {
		ev.dataTransfer.effectAllowed = "move";
		ev.dataTransfer.setData("text", ev.target.innerHTML);
		ev.dataTransfer.setDragImage(ev.target, 0, 0);
		eleDrag = ev.target;
		return true;
	};
	eleDrags[i].ondragend = function(ev) {
		ev.dataTransfer.clearData("text");
		eleDrag = null;
		return false
	};
}
eleDustbin.ondragover = function(ev) {
	ev.preventDefault();
	return true;
};

eleDustbin.ondragenter = function(ev) {
	this.style.color = "#ffffff";
	return true;
};
eleDustbin.ondrop = function(ev) {
	if (eleDrag) {
		eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
		eleDrag.parentNode.removeChild(eleDrag);
	}
	this.style.color = "#000000";
	return false;
};
function resCalc(){
	$("#result").val($("#num_a").val()+$("#num_b").val());
}
</script>
</html>